<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
        // 将扁平数据转换为树形结构数据（递归方法）
        // data为传入的扁平数据
        // nodeId 为顶级节点的pid
      function getTreeData(data,nodePid) {
        const treeData = []
        data.forEach( item=> {
          // 如果当前pid为顶级pid,说明还有二级数据
          if(item.pid === nodePid){
            const children = getTreeData(data,item.id) 
            if(children.length) {
              item.children = children
            }
            // 如果pid不是顶级pid，则说明为一级数据，直接添加到数据数组中
            treeData.push(item)
          }
        });
      
        return treeData;
      }

      const data = [
        { id: "01", name: "张大大", pid: "", job: "项目经理" },

        { id: "02", name: "小亮", pid: "01", job: "产品leader" },
        { id: "07", name: "小丽", pid: "02", job: "产品经理" },
        { id: "08", name: "大光", pid: "02", job: "产品经理" },

        { id: "03", name: "小美", pid: "01", job: "UIleader" },
        { id: "09", name: "小高", pid: "03", job: "UI设计师" },
        { id: "05", name: "老王", pid: "01", job: "测试leader" },
        { id: "06", name: "老李", pid: "01", job: "运维leader" },

        { id: "04", name: "老马", pid: "01", job: "技术leader" },
        { id: "10", name: "小刘", pid: "04", job: "前端工程师" },
        { id: "11", name: "小华", pid: "04", job: "后端工程师" },
        { id: "12", name: "小李", pid: "04", job: "后端工程师" },

        { id: "13", name: "小赵", pid: "05", job: "测试工程师" },
        { id: "14", name: "小强", pid: "05", job: "测试工程师" },
        { id: "15", name: "小涛", pid: "06", job: "运维工程师" },
      ];
      const treeData = getTreeData(data,'');

      console.log(treeData);

      [ { id: "01", name: "张大大", pid: "", job: "项目经理" }, ]
    </script>
  </body>
</html>
